<template>
  <div>
    <el-card shadow="always">
      <Table :rows="rows"
             :pageOpts="pageOpts"
             @del="del"
             @table-change="tableChange" />
      <Page :pageOpts="pageOpts"
            @table-change="tableChange" />
    </el-card>
  </div>
</template>
<script>
import { getArticleList, delArticle } from "@/api/article";
import Table from "./table";
import Page from "./page";
export default {
  components: {
    Table,
    Page
  },
  async created() {
    await this.getList();
  },
  data() {
    return {
      isChangeStatus: false,
      rows: [],
      pageOpts: {
        count: 0,
        pageSize: 10,
        current: 1,
        status: [1, 2],
        sort: {
          create_time: "descending"
        }
      }
    };
  },
  methods: {
    async getList() {
      const { rows, count, pageSize, current } = await getArticleList(
        this.pageOpts
      );
      this.rows = rows;
      this.pageOpts = {
        ...this.pageOpts,
        count,
        pageSize,
        current
      };
    },
    tableChange(pageOpts) {
      if (!pageOpts.status.length) {
        pageOpts.status = [1, 2];
      }
      this.pageOpts = pageOpts;
      this.getList();
    },
    async del(id) {
      await delArticle(id);
      this.$message({
        message: "删除成功",
        type: "success",
        center: true
      });
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
